<script lang="ts" setup>
import type { DataTableColumns, PaginationInfo } from 'naive-ui';
import { NButton, NSpace } from 'naive-ui';
import { h, reactive, ref } from 'vue';
import { enumRender, longDateTimeRender } from '~/src/utils/view';
import { isSuccess } from '@/utils/response';
import { ConfigStatus } from '@/enum/carbon';
import { enumToOption } from '@/utils/enum';
import * as service from './modules/api';
import CreateModule from './modules/create-module.vue';
import EditModule from './modules/edit-module.vue';
import DeleteModule from './modules/delete-module.vue';
import { SmsVendor } from './modules/enum';

const pageData = ref<Carbon.PageData<any>>({ total: 0, data: [] });
const loading = ref<boolean>(false);
const vendorOptions = enumToOption(SmsVendor);

const defaultSearchForm = {
  vendor: null
};
const searchForm = ref({ ...defaultSearchForm });

const columns: DataTableColumns = [
  { title: 'ID', key: 'id', width: 150, ellipsis: { tooltip: true } },
  { title: '供应商', key: 'vendor', render: enumRender('vendor', SmsVendor) },
  { title: '签名', key: 'signature' },
  { title: '模板', key: 'templateId' },
  { title: '状态', key: 'status', render: enumRender('status', ConfigStatus) },
  { title: '创建时间', key: 'createTime', render: longDateTimeRender('createTime') },
  { title: '更新时间', key: 'updateTime', render: longDateTimeRender('updateTime') },
  {
    title: '操作',
    key: 'edit',
    fixed: 'right',
    width: 200,
    render: row => {
      return h(NSpace, {}, () => {
        const buttons = [];

        buttons.push(
          h(
            EditModule,
            {
              id: () => row.id,
              callback: () => {
                page();
              }
            },
            () => '编辑'
          )
        );

        buttons.push(
          h(
            DeleteModule,
            {
              id: () => row.id,
              callback: () => {
                page();
              }
            },
            () => '删除'
          )
        );

        return buttons;
      });
    }
  }
];

const pagination = reactive<PaginationInfo>({
  startIndex: 0,
  endIndex: 0,
  page: 1,
  pageSize: 10,
  pageCount: 1,
  itemCount: 0
});

async function page(currentPage?: number) {
  let pageIndex;
  if (currentPage === undefined) {
    pageIndex = pagination.page;
  } else {
    pageIndex = currentPage;
  }
  pagination.page = pageIndex;
  // 获取数据
  loading.value = true;
  try {
    const response = await service.page({
      pageIndex: pageIndex - 1,
      pageSize: pagination.pageSize,
      ...searchForm.value
    });
    if (isSuccess(response)) {
      pageData.value = response.data;
      if (pageData.value.total !== -1) {
        pagination.pageCount = pageData.value.total / pagination.pageSize;
        pagination.itemCount = Number(pageData.value.total);
      }
    }
  } finally {
    loading.value = false;
  }
}

function reset() {
  searchForm.value = { ...defaultSearchForm };
  pagination.page = 1;
  page();
}

page();
</script>

<template>
  <NSpace vertical size="large">
    <n-form inline :label-width="80" :model="searchForm">
      <n-form-item class="vendor" label="供应商:" path="value">
        <n-select v-model:value="searchForm.vendor" :options="vendorOptions"></n-select>
      </n-form-item>
      <n-form-item>
        <NButton @click="page()">查询</NButton>
        <NButton @click="reset()">重置</NButton>
      </n-form-item>
      <n-form-item>
        <CreateModule :callback="() => page()"></CreateModule>
      </n-form-item>
    </n-form>
    <n-data-table
      remote
      bordered
      :single-line="false"
      :loading="loading"
      :data="pageData.data"
      :columns="columns"
      :pagination="pagination"
      :on-update:page="page"
      :scroll-x="1800"
    ></n-data-table>
  </NSpace>
</template>

<style scoped>
.n-button {
  margin-left: 10px;
}
.vendor {
  width: 100px !important;
}
</style>
